<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:util="http://java.sun.com/jsf/composite/util">
	<ui:composition template="/views/layouts/main.xhtml">
	<ui:define name="content">
		<style>
			.ord {
				display: inline;
				float: left;
				position: relative;
				width: 18px;
				height: 18px;
				background-color: transparent;
				border: 0px;
			}
		</style>
		<h:form id="formPrincipal">
			<div class="grid_18">
				<div class="grid_6">
					<util:home action="#{cenarioBaseBean.goHome}" />
					<p:commandButton value="#{i18n.btn_Salvar}" action="#{cenarioBaseBean.save}" 
						ajax="false" icon="ui-icon ui-icon-disk" />
					<p:commandButton value="#{i18n.btn_Desistir}" action="#{cenarioBaseBean.goDesistir}" 
						ajax="false" immediate="true" icon="ui-icon ui-icon-cancel" />
				</div>
				<util:titulo value="#{i18n.CenarioBase_Titulo}" />
				<div class="grid_1">
					<util:help />
				</div>
			</div>
			
			<div class="grid_18">
				<p:messages closable="true" />
			</div>
			
			<util:label grid="11" value="#{i18n.CenarioBase_NomeFluxo}" />
			<util:label grid="7" value="#{i18n.CenarioBase_CadastradoPor}" />
			<div class="grid_11">
				<p:inputText value="#{cenarioBaseBean.cenarioBaseInstance.nome}" styleClass="width_10" />
			</div>
			<div class="grid_7">
				<p:inputText value="#{cenarioBaseBean.cenarioBaseInstance.responsavelCadastro.nomeCompleto}" 
					styleClass="width_7" disabled="true"/>
			</div>
			
			<div class="grid_18">
				<br/>
				<p:dataTable id="dataTableFluxosBase" widgetVar="dataTableFluxosBase"
					paginator="false" dynamic="true" lazy="true" var="var"
					value="#{cenarioBaseBean.cenarioBaseInstance.fluxosBase}" 
					rows="100" emptyMessage="#{i18n.NenhumClientePortalEncontrado}"
					editable="true" >
					<f:facet name="header">
						<h:outputText value="Fluxos" style="float:left" /> 
					</f:facet>
					
					<p:ajax event="rowEdit" update="@this" />  
        			<p:ajax event="rowEditCancel" update="@this" />  
					
					<p:column headerText="#{i18n.CenarioBase_Indice}" style="text-align:right; width: 40px;">  
			            <h:outputText value="#{var.codFluxo}" />  
			        </p:column>
			        <p:column headerText="#{i18n.CenarioBase_Fluxo}">
				        <p:cellEditor>
			                <f:facet name="output">
			                    <h:outputText value="#{var.acao}" />
			                </f:facet>
			                <f:facet name="input">
			                    <h:inputText value="#{var.acao}"/>
			                </f:facet>
			            </p:cellEditor>
			        </p:column>
			        <p:column headerText="Ações" style="width:125px;">
			        	<p:commandButton icon="ui-icon ui-icon-plus" process="@this"
			        		onstart="spinner.show();" oncomplete="spinner.hide();"
			        		update=":formPrincipal:dataTableFluxosBase" styleClass="ord" 
			        		action="#{cenarioBaseBean.adicionarFluxo(var.codFluxo)}" />
			        	<p:rowEditor />
			        	<p:commandButton icon="ui-icon ui-icon-trash" process="@this"
			        		onstart="spinner.show();" oncomplete="spinner.hide();"
			        		update=":formPrincipal:dataTableFluxosBase" styleClass="ord"   
			        		action="#{cenarioBaseBean.removerFluxo(var.codFluxo)}" 
			        		rendered="#{cenarioBaseBean.cenarioBaseInstance.fluxosBase.size() ne 1}" />
			        	<p:commandButton icon="ui-icon ui-icon-arrowstop-1-w" process="@this"
			        		onstart="spinner.show();" oncomplete="spinner.hide();"
			        		update=":formPrincipal:dataTableFluxosBase" styleClass="ord"   
			        		action="#{cenarioBaseBean.diminuirTabulacao(var.codFluxo)}" />
			        	<p:commandButton icon="ui-icon ui-icon-arrowstop-1-e" process="@this"
			        		onstart="spinner.show();" oncomplete="spinner.hide();"
			        		update=":formPrincipal:dataTableFluxosBase" styleClass="ord"   
			        		action="#{cenarioBaseBean.aumentarTabulacao(var.codFluxo)}" />
			        </p:column>
				</p:dataTable>
			</div>
		</h:form>
	</ui:define>
	</ui:composition>
</f:view>